<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" id="mainFrame">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <title>光谷联合智慧园区事业部-空间数据</title>
    <link href="../res/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="../stylesheets/style.css" rel="stylesheet" type="text/css" />
    <link href="../stylesheets/iconfont.css" rel="stylesheet" type="text/css" >
</head>

<body ng-app="showApp"  ng-controller="showSpaceController" ng-cloak>
  <div class="mianContent" style="height:100%;width: 100%">
      <div class="top">
          <h2>智慧园区事业部空间数据</h3>
          <img src="../pic/intelliDept/jx.png" alt="">
          <h3 class="time">{{timeStrOne}} {{timeStrTwo}}</h3>
      </div>
      <div class="main">
           <div style="width:1413px; position: relative;height: 100%;" class="inline_block align_top">
            <div class="tuli">
              <span class="color_tu" style="background: #cccccc;"></span>
              <span  style="display: inline-block;vertical-align: text-top;">离岗</span>
              <span class="color_tu"  style="background:#2acfff;margin-left: 20px"></span>
              <span style="display: inline-block;vertical-align: text-top;">在岗</span>
              <!-- <span class="color_tu"  style="background:rgba(40, 71, 109, 1);margin-left: 20px"></span>
              <span style="display: inline-block;vertical-align: text-top;">工位正常</span> -->
              <span class="color_tu"  style="background:rgba(152, 95, 39, 1);margin-left: 20px"></span>
              <span style="display: inline-block;vertical-align: text-top;">工位正常</span>
              <span class="color_tu"  style="background:#6e1a17;margin-left: 20px"></span>
              <span style="display: inline-block;vertical-align: text-top;">厕位有人</span>
            </div>
             <div style="width:100%; position: absolute;top:-257px;">
                 <scheme-detail   scheme="pconfig.scheme"  ></scheme-detail>
             </div>
           </div>
           <div class="inline_block right align_middle"  id="tables">
             <div style="text-align: left;margin:50px 50px 0px 50px;">
               <img src="../pic/intelliDept/inline.png" alt="">
             </div>
                       <div>
                            <div class="inline_block w_50">
                               <div style="color: #1D84CB;font-size: 60px;font-weight: 700;font-family:UniversUltraCondensedBQ-Regular;">{{totalCnt}}</div>
                               <div class="detail">总工位数/个</div>
                            </div>
                            <div class="inline_block w_50">
                             <div style="color: #B66032;
                             font-size: 60px;
                             font-weight: 700;font-family:UniversUltraCondensedBQ-Regular;">{{totalCnt-workNum}}</div>
                             <div class="detail">空闲工位数/个</div>
                            </div>
                       </div>
                     
                       <!-- <div class="pro">
                          <div class="inline_block" style="background:#154390; width:298px;" ><span style="color:#2067D4" class="num">{{totalCnt}}</span></div>
                          <div class="inline_block" style="background:#483940; width:64px;margin-left: -4px"><span style="color:#AC5019" class="num">{{totalCnt-workNum}}</span></div>
                       </div> -->
                       <div style="text-align: left;margin: 50px 50px 0px 50px;">
                          <img src="../pic/intelliDept/online.png" alt="">
                        </div>
                       <div style="margin-bottom: 50px;">
                         <div class="inline_block w_50">
                            <div style="color: rgba(42, 207, 255, 1);
                            font-size: 60px;
                            font-weight: 700;font-family:UniversUltraCondensedBQ-Regular;">{{inlineNum}}</div>
                            <div class="detail">今日在岗/人</div>
                         </div>
                         <div class="inline_block w_50">
                          <div style="color: rgba(225, 182, 34, 1);
                          font-size: 60px;
                          font-weight: 700;font-family:UniversUltraCondensedBQ-Regular;">{{personList.data.length}}</div>
                          <div class="detail">今日外勤/人</div>
                         </div>
                    </div>
                  
                    <!-- <div class="pro" style="margin-bottom: 78px;">
                       <div class="inline_block" style="background:rgba(21,131,144,0.3); width:298px" ><span style="color:rgba(31, 170, 195, 1)" class="num">{{inlineNum}}</span></div>
                       <div class="inline_block" style="background:rgba(179, 159, 25,.5); width:64px;margin-left: -4px"><span style="color:rgba(172, 132, 25, 1)" class="num">{{personList.data.length}}</span></div>
                    </div> -->
                       <p class="title">今日外勤人员</p>
                   <div  id="parking-msg-c" style="height:246px;overflow:scroll">
                     <div  class="tables" style="margin-bottom:0px;">
                          <div ng-repeat="item in personList.data" style="text-align: left;float: left;"  class="name" ng-class="{'m-l200' : showNum==1, 'm-l100' : showNum==2, 'm-l50':showNum==3}"><span><img src="../pic/intelliDept/icon_1.png"  class="icon" alt="">{{item.name}}</span></div>
                      
                     </table>
                   </div>
                      
                </div>
           </div>
      </div>
  </div>
       
    
</body>

</body>
<script type="text/javascript" src="/res/jquery.min.js"></script>
<script type="text/javascript" src="/res/angular1.5.11/angular.min.js"></script>
<script type="text/javascript" src="/res/angular1.5.11/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="/res/layer/layer.js"></script>
<script type="text/javascript" src="/res/AirocovMap.min.js"></script>
<script type="text/javascript" src="/res/reconnectingwebsocket/reconnecting-websocket.min.js"></script>

<script>
    var app = angular.module("showApp", ['ui.bootstrap']);
 
</script>
<script type="text/javascript" src="/javascripts/showSpaceController.js"></script>

</html>
<style>
  html{
    width: 1920px;
    height: 1080px;
  }
  body{
     
      background: url('../pic/intelliDept/bg.png');
      height:100%;
width:100%;
overflow: hidden;

background-size:cover;
position:relative; 
min-height:100%; 
  }
  .top{
      height:15%;
      position: relative;
      text-align: center
  }
  .top img{
    height: 82px;
  }
  .top h2{
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    color: rgba(205,230,255,1);
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 12%;
    font-size: 32px;
   
  }
  .time{
    font-family:'DINMittelschrift';
  font-weight:400;
 color:rgba(34,184,254,1);
text-align: center;
height: 32px;
font-size: 20px
  }
  .main{
    height: 80%;
    width: 100%;
    margin: 0 30px
  }
  .inline_block{
    display: inline-block
  }
  .right{
    height:828px;
    background: #08182E;
    width: 460px;
    text-align: center;
   
  
    
  }
  .right .title{
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #CDE0FF;
    font-size: 18px;
    background: rgba(13, 44, 82, 0.3);
    height: 54px;
    line-height: 54px;
  }
  .align_top{
  
    vertical-align: top
  }
  .align_middle{
    vertical-align: middle
  }
  .right .name{
    color: #216EBD;
    font-size: 16px;
    line-height: 40px;
    /* background: #0A1E39; */
    margin: 0px;
    border-bottom: 1px solid #081930;
  }
  #parking-msg-c::-webkit-scrollbar {
        display: none;
    }
    .tables{
      width: 100%;
    max-width: 100%;
    }
    .icon{
      height: 20px;
    vertical-align: sub;
    margin: 0 10px;
    }
    .total_cont{
      margin-top: 30px
    }
    .detail{
      color:#356BC4;
      font-size: 18px;
    }
    .w_50{
      width: 140px
    }
    .pro{
      width:366px;
height:60px;
/* border:2px solid rgba(24,83,174,1); */
margin: 0 48px

    }
    .pro div{
      height: 100%;
      text-align: center;
    }
    .pro .num{
      line-height: 60px;
      font-size: 20px;
    }
    .tuli{
      position:absolute;
      font-size: 20px;
      color: #356BC4;
      top: -65px;
    }
    .tuli .color_tu{
      display: inline-block;
    height: 20px;
    width: 50px;
    background: #7F8082;
    vertical-align: middle;
    
    }
    .m-l200{
      padding-left: 185px;
    }
    .m-l100{
      display: inline-block;
      width: 200px;
    padding-left: 93px;
    }
    .m-l50{
      display: inline-block;
      width: 130px;
      padding-left: 42px;
    }
    
</style>